<template>
    <div class="bg">
        <div class="login-container">
            <div class="logo">
                <h1>欢迎使用转物次元</h1>
                <div>请登录您的账号</div>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto">
                <el-form-item prop="username" label="用户名">
                    <el-input type="text" v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input show-password v-model="ruleForm.password" placeholder="请输入密码"
                        @keyup.enter.native="login"></el-input>
                </el-form-item>
                <!-- <el-button class="loginBtn" @click="reset('ruleForm')">重置</el-button> -->
                <el-button class="loginBtn" type="primary" @click="login">
                    登录
                </el-button>      
                <div class="signup-link">
                    还没有账号? <router-link to="/register" class="register-link">立即注册</router-link>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data() {
        return {
            ruleForm: {
                username: '',
                password: ''
            },
            rules: {
                username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
                password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
            }
        }
    },
    methods: {
        login() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    let username = this.ruleForm.username;
                    let password = this.ruleForm.password;
                    // ajax，axios => Get Post 等方法
                    this.$axios.post('/auth/login', {
                        username: username,
                        password: password
                    })
                    .then(response => {
                        if (response.data.code === 200) {
                            this.$message.success('登录成功');
                            /* 将后台返回的user类对象存储到Vuex的store中 */
                            let data = response.data.data;
                            this.$store.commit('login', data);
                            /* 判断用户身份，分别进入对应的页面 */
                            setTimeout(() => {
                                if (data.userType === 'NORMAL') {
                                    this.$router.replace("/index");
                                } else if (data.userType === 'ADMIN') {
                                    this.$router.replace("/admin");
                                }
                            }, 500)    
                        } else {
                            this.$message.error(response.data.data);
                        }
                    })
                    .catch(error => {
                    })
                }
            })
        },
        reset(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style scoped lang="scss">
.bg {
    width: 100vw;
    height: 100vh;
    background-color: #f5f7fa;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: url('../assets/login-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    // background-image: linear-gradient(135deg, rgba(0, 202, 168, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
}

.login-container {
    width: 90%; /* 改为百分比宽度 */
    max-width: 500px;
    min-width: 280px; /* 设置最小宽度 */
    padding: 30px 60px; /* 调整内边距 */
    background-color: white;
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 202, 168, 0.15);
    transition: all 0.3s ease;
    margin: 20px; /* 添加外边距 */
}

.login-container:hover {
    box-shadow: 0 15px 40px rgba(0, 202, 168, 0.2);
}

.logo {
    text-align: center;
    margin-bottom: 25px; /* 调整间距 */
    color: #606266;
    font-size: 14px;
}

.logo h1 {
    color: #00caa8;
    font-size: 24px; /* 调整字体大小 */
    font-weight: 600;
    margin-bottom: 8px; /* 调整间距 */
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
    .login-container {
        padding: 25px 50px; /* 小屏幕减少内边距 */
    }
    
    .logo h1 {
        font-size: 22px; /* 小屏幕调整标题大小 */
    }
    
    .el-form-item {
        margin-bottom: 18px; /* 调整表单项间距 */
    }
}

@media screen and (max-width: 480px) {
    .login-container {
        padding: 20px 40px; /* 更小屏幕进一步减少内边距 */
        width: 95%; /* 增加宽度占比 */
    }
    
    .logo h1 {
        font-size: 20px; /* 更小屏幕调整标题大小 */
    }
    
    .el-form-item__label {
        font-size: 14px; /* 调整标签字体大小 */
    }
    
    .el-input__inner {
        padding: 10px 12px; /* 调整输入框内边距 */
    }
    
    .loginBtn {
        margin-top: 15px; /* 调整按钮上边距 */
        padding: 10px; /* 调整按钮内边距 */
    }
    
    .signup-link {
        font-size: 13px; /* 调整注册链接字体大小 */
    }
}

.loginBtn {
    width: 100%;
    margin-top: 20px;
}

a {
    text-decoration: none;
}

.signup-link {
    text-align: center;
    margin-top: 20px; /* 调整间距 */
    color: #666;
    font-size: 14px;
    .register-link {
        color: #00caa8;
        font-weight: bold;
    }
}
</style>